<template>
  <div style="background:rgba(255,0,0,0.2)">
    <dl>
      <dt>测试列<b>表</b>和分页组合</dt>
      <dd>任何分页动作都可以发一个请求，用MOCK拦截并直接返回一个模拟数据</dd>
      <dd v-if="mockArr.legnth == 0">
        比方旁边这个按钮<button type="test">test</button>
      </dd>
    </dl>

    <el-table :data="mockArr" width="100%">
      <el-table-column label="face" prop="face">
        <template slot-scope="scope">
          <img :src="scope.row.face" />
        </template>
      </el-table-column>
      <el-table-column v-for="(c,k) in mockColmun" :key="k"
        :label="c" :prop="c" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.current"
      :page-sizes="mockSizes"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "TableAndPage",
  components: {},
  data() {
    return {
      mockColmun:[],
      mockArr: [],
      mockSizes:[10,20,50],
      page:{
        current:1,
        size:5,
        total:255,
      },
    };
  },
  
  methods: {
    
    updateArr: function (path, array) {
      let tar = this[path];
      tar.splice(0, tar.length);
      array.forEach((v, i) => {
        tar.push(v);
      });
    },
    handleSizeChange(val) {
      this.test();
    },
    handleCurrentChange(val) {
      this.test();
    },
    test: function () {
      this.$api.testMock().then((res) => {
        Object.keys(res.data[0]).forEach((v)=>{
          this.mockColmun.push(v)
        })
        this.updateArr("mockArr", res.data);
      });
    },
  },
  beforeCreate: function () {},
  created: function () {},
  beforeMount: function () {},
  mounted: function () {},
  beforeUpdate: function () {},
  updated: function () {},
  beforeDestroy: function () {},
  destroyed: function () {},
};
</script>

<style scoped lang="less">
.el-table{
  background-color:transparent;
  //从背景色会发现点问题
  th,tr{
    // 完全无效，原因不明
  }
}

</style>